<template>
    <div style="height: 100vh">
        <div style="height: 7vh; justify-content: center; color: #2CC2EF; background: rgb(4,26,87) url('/homeHeaderImg.png');
        background-size: 100% 180%; font-size: 26px; font-family: 宋体,serif;">
            <div style="height: 7vh;display: flex; position: absolute; top: 10px; left: 0; align-items: flex-start;">
                <!--        <el-icon size="30px" style="cursor: pointer" @click="this.$store.state.tabList=[]; this.$router.push('/client/client');">-->
                <!--          <HomeFilled/>-->
                <!--        </el-icon>-->
                <div><img src="/瑞铭LOGO.png" alt="logo" width="50" style="cursor: pointer"
                          @click="this.$store.state.tabList=[]; this.$router.push('/client/client');"></div>
                <div style="display: flex; font-size: 20px;margin-left: 10px">
                    <div>安全责任人：{{ userInformation.safeResponMan+"&ensp;&ensp;" }}</div>
                    <div>安全管理人：{{ userInformation.safeManager+"&ensp;&ensp;" }}</div>
                    <div>电话：{{ userInformation.safeTelephone }}</div>
                </div>
            </div>
            <!--      rgb(42,146,231)   rgb(58,159,243);#2CC2EF-->
            <div style="color: #2CC2EF;text-shadow: 4px 4px 8px rgba(183,38,38,0.5);width:30%; margin: 0 auto; text-align: justify; font-family: 'CustomFont',emoji; font-size: 45px">
                {{ userInformation.configure }}智慧消防监管平台
                <div style="display: inline-block; width: 100%; height: 0;"></div> <!-- forces justify alignment -->
            </div>
            <!--      <div style="font-family: 'CustomFont';font-size: 48px; color: #8ac2bc; text-align: center; text-shadow: 4px 4px 8px rgba(183,38,38,0.5)">-->
            <!--        {{ userInformation.configure }}智慧消防监管平台-->
            <!--      </div>-->
            <div style="height: 7vh;display: flex; flex-direction: column; position: absolute; top: 10px; right: 0; align-items: flex-end;">
                <div style="display: flex; align-items: center;">
                    <div style="margin-right: 15px">{{ currentTime }}</div>
                    <div class="element-icons el-icon-message-solid"
                         style="font-size: 30px;cursor: pointer;margin-right: 10px"
                         @click="this.$store.state.warnDialog=true"></div>
                    <el-dropdown>
        <span>
          <i class="element-icons el-icon-s-tools"
             style="font-size: 30px; color: #2CC2EF; cursor: pointer;"></i>
        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="closeAnnouncer">关闭播报</el-dropdown-item>
                                <el-dropdown-item @click="uploadApp">APP下载</el-dropdown-item>
                                <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div style="position: absolute; bottom: 10px;text-align: right;padding: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);z-index: 1000">
                    <Announcement @click="announceClick" style="font-size: 14px; cursor: pointer"/>
                </div>
            </div>
        </div>

        <div class="container" style="background: center url('/homeBG1.png');">
            <div class="left">
                <div class="left-top"
                     :style="{
          background: `url(${information[0]?.bgUrl!==undefined?information[0].bgUrl:null}) no-repeat center center`,
          backgroundSize: 'cover',
          borderRadius: '12px',
        }"
                     @click="wulianClick(information)">
                    <dv-border-box-12>
                        <div class="first-right-body-total">
                            <div style="display:flex">
                                <Image/>
                                <span style="margin-top: -5px;margin-left: 5px">{{
                    information[0]?.name ? information[0]?.name : "无数据"
                  }}</span>
                            </div>
                        </div>
                        <div style="display: flex;justify-content: space-between" v-if="changeClient">
                            <ScoreAcyclic :width="monitorVideoWidth" :height="monitorVideoHeight"/>
                            <Acyclic :width="monitorVideoWidth" :height="monitorVideoHeight"/>
                        </div>
                    </dv-border-box-12>
                </div>
                <div class="left-center"
                     :style="{
          background: `url(${information[1]?.bgUrl!==undefined?information[1].bgUrl:null}) no-repeat center center`,
          backgroundSize: 'cover',
          borderRadius: '12px',
          display:'flex'
        }">
                    <dv-border-box-12>
                        <div class="first-right-body-total" style="display: flex">
                            <div style="display:flex">
                                <Image/>
                                <span style="margin-top: -5px;margin-left: 5px">{{
                    information[1]?.name ? information[1]?.name : "无数据"
                  }}</span>
                                <!--              <dv-decoration-3 style="margin-top: -5px;width:200px;height:30px;"/>-->
                            </div>
                            <div class="operate">
                                <el-button
                                        v-for="option in operateOptions"
                                        :key="option"
                                        size="small"
                                        :style="[option === selectedOperate ? activeStyle : defaultStyle]"
                                        @click="selectOption(option)">
                                    {{ option }}
                                </el-button>
                                <el-button size="small" :style="defaultStyle"
                                           @click="this.$router.push('/client/client');">
                                    更多
                                </el-button>
                                <el-button v-if="otherClient" size="small" :style="defaultStyle" @click="backClient()">
                                    返回
                                </el-button>
                            </div>
                        </div>
                        <div class="dataContainer">
                            <div class="info-container">
                                <span>联网单位：<a style="color: #1bcebf;">{{ clientConfig.clientsCount }}</a></span>
                                <span>在线设备：<a style="color: #0f8ddc;">{{ clientConfig.equipmentCount }}</a></span>
                                <span>在线率：<a style="color: #e3d42b;">{{ clientConfig.onlineRate }}</a></span>
                                <el-input
                                        class="input-border-style"
                                        v-if="selectedOperate==='列表'"
                                        v-model="this.$store.state.searchClientName"
                                        size="small"
                                        style="height: 30px;width: 150px"
                                        placeholder="输入单位名称进行搜索">
                                </el-input>
                            </div>
                        </div>
                        <div class="dataContainer" style="padding-top: 10px">
                            <UnitBar v-if="selectedOperate==='统计'" :width="monitorVideoWidth"
                                     :height="monitorVideoHeight"/>
                            <UnitList @fatherMethod="changeClientClick" v-if="selectedOperate==='列表'"
                                      :width="monitorVideoWidth"
                                      :height="monitorVideoHeight"/>
                        </div>
                    </dv-border-box-12>
                </div>
                <div class="left-bottom" :style="{
          background: `url(${information[2]?.bgUrl!==undefined?information[2].bgUrl:null}) no-repeat center center`,
          backgroundSize: 'cover',
          borderRadius: '12px',
        }"
                     @click="haiwanClick(information)">
                    <dv-border-box-12>
                        <div class="first-right-body-total" style="display:flex;">
                            <div style="display:flex">
                                <Image/>
                                <span style="margin-top: -5px;margin-left: 5px">{{
                    information[2]?.name ? information[2]?.name : "无数据"
                  }}</span>
                            </div>
                            <el-input
                                    class="input-border-style"
                                    v-model="searchVideoName"
                                    size="small"
                                    style="height: 30px;width: 150px"
                                    placeholder="输入设备名称进行搜索">
                            </el-input>
                            <div class="operate">
                                <el-button
                                        size="small"
                                        :style="defaultStyle"
                                        @click="this.$router.push('/video/videoList')">
                                    更多
                                </el-button>
                            </div>
                        </div>
                        <div style="height: 90%;width: 98%;padding-top: 10px">
                            <div class="scroll-wrap">
                                <div class="scroll-header">
                                    <ul class="header-scroll-ul">
                                        <li class="scroll-li">
                                            <div style="width: 10%">名称</div>
                                            <div style="width: 45%">型号</div>
                                            <div style="width: 40%">序列号</div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="scroll-content">
                                    <Vue3SeamlessScroll v-if="changeClient" :limitScrollNum="6" :singleHeight="46"
                                                        :singleWaitTime="10"
                                                        :hover="true" class="scroll-list"
                                                        :list="monitorScrollConfig.data">
                                        <ul class="scroll-ul">
                                            <li class="scroll-li" style="cursor: pointer;"
                                                v-for="(item, index) in monitorScrollConfig.data"
                                                :key="index" @click="monitorClick(item)">
                                                <div style="width: 20%" :title="item.name">{{ item.name }}</div>
                                                <div style="width: 33%" :title="item.accessProtocol">{{
                                                    item.accessProtocol }}
                                                </div>
                                                <div style="width: 47%" :title="item.deviceNum">{{ item.deviceNum }}
                                                </div>
                                            </li>
                                        </ul>
                                    </Vue3SeamlessScroll>
                                </div>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="center">
                <div class="center-top">
                    <div class="items" ref="poingMapContainer"
                         style="position: relative; text-align: center; overflow: hidden">
                        <HomeMapShow/>
                        <PointClickDialog v-if="this.$store.state.pointClickDialog"
                                          @close="this.$store.state.pointClickDialog = false"
                                          class="dialog-within-div"/>
                    </div>
                </div>
                <div class="center-bottom">
                    <dv-border-box-12>
                        <div class="first-right-body-total" style="display: flex">
                            <div style="display:flex">
                                <Image/>
                                <span style="margin-top: -5px;margin-left: 5px">{{
                    information[3]?.name ? information[3]?.name : "无数据"
                  }}</span>
                            </div>
                            <div class="operate">
                                <el-button
                                        v-for="button in buttons"
                                        :key="button"
                                        size="small"
                                        :style="[button === activeButton ? activeStyle : defaultStyle]"
                                        @click="setActiveButton(button)">
                                    {{ button }}
                                </el-button>
                            </div>
                        </div>
                        <div style="height: 89%;margin: 0 auto;width: 99%;justify-content: center" v-if="changeClient">
                            <!--              <dv-scroll-board @click="scrollClick" v-if="change" :config="scrollConfig"-->
                            <!--                               style="width:100%;height: calc(100% - 30px);cursor: pointer"/>-->
                            <div class="scroll-wrap" v-if="this.activeButton==='设备'">
                                <div class="scroll-header">
                                    <ul class="header-scroll-ul">
                                        <li class="scroll-li">
                                            <div style="width: 14%">设备识别码</div>
                                            <div style="width: 45%">地址</div>
                                            <div style="width: 25%">设备类型</div>
                                            <div style="width: 8%;">状态</div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="scroll-content">
                                    <Vue3SeamlessScroll v-if="change" :limitScrollNum="6" :singleHeight="46"
                                                        :singleWaitTime="10"
                                                        :hover="true" class="scroll-list" :list="scrollConfig.data">
                                        <ul class="scroll-ul">
                                            <li class="scroll-li" style="cursor: pointer;align-items: center"
                                                v-for="(item, index) in scrollConfig.data" :key="index"
                                                @click="videoClick(item)">
                                                <div style="width: 20%" :title="item.equipmentId">{{ item.equipmentId
                                                    }}
                                                </div>
                                                <div style="width: 40%" :title="item.address">{{ item.address }}</div>
                                                <div style="width: 25%" :title="item.typeName">{{ item.typeName }}</div>
                                                <el-tag
                                                        @click="scrollClick(item)"
                                                        style="width: 90px; color: white"
                                                        :style="{ backgroundColor: getEquipmentColor(item.state) }"
                                                        type="primary">
                                                    {{ getEquipmentStateText(item.state) }}
                                                </el-tag>
                                            </li>
                                        </ul>
                                    </Vue3SeamlessScroll>
                                </div>
                            </div>
                            <div class="scroll-wrap" v-if="this.activeButton==='报警'">
                                <div class="scroll-header">
                                    <ul class="header-scroll-ul">
                                        <li class="scroll-li">
                                            <div style="width: 13%">设备编号</div>
                                            <div style="width: 33%">报警时间</div>
                                            <div style="width: 15%">设备名称</div>
                                            <div style="width: 24%">报警类型</div>
                                            <div style="width: 8%">处理状态</div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="scroll-content">
                                    <Vue3SeamlessScroll v-if="change" :limitScrollNum="6" :singleHeight="46"
                                                        :singleWaitTime="10"
                                                        :hover="true" class="scroll-list" :list="scrollConfig.data">
                                        <ul class="scroll-ul">
                                            <li class="scroll-li" style="cursor: pointer;"
                                                v-for="(item, index) in scrollConfig.data"
                                                :key="index" @click="scrollClick(item)">
                                                <div style="width: 20%" :title="item.equipmentId">{{ item.equipmentId
                                                    }}
                                                </div>
                                                <div style="width: 25%" :title="item.warnTime">{{ item.warnTime }}</div>
                                                <div style="width: 20%" :title="item.equipmentName">{{
                                                    item.equipmentName }}
                                                </div>
                                                <div style="width: 18%">{{ item.warnTypeName }}</div>
                                                <el-tag
                                                        style="margin-left: 30px; width: 90px; color: white"
                                                        :style="{ backgroundColor: getWarnColor(item.isDeal) }"
                                                        type="primary">
                                                    {{ getWarnStateText(item.isDeal) }}
                                                </el-tag>
                                            </li>
                                        </ul>
                                    </Vue3SeamlessScroll>
                                </div>
                            </div>
                            <div class="scroll-wrap" v-if="this.activeButton==='处理'">
                                <div class="scroll-header">
                                    <ul class="header-scroll-ul">
                                        <li class="scroll-li">
                                            <div style="width: 14%">设备编号</div>
                                            <div style="width: 27%">消息通知</div>
                                            <div style="width: 15%">故障上报</div>
                                            <div style="width: 26%">实地勘察</div>
                                            <div style="width: 15%">排除隐患</div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="scroll-content">
                                    <Vue3SeamlessScroll v-if="change" :limitScrollNum="6" :singleHeight="46"
                                                        :singleWaitTime="10"
                                                        :hover="true" class="scroll-list" :list="scrollConfig.data">
                                        <ul class="scroll-ul">
                                            <li class="scroll-li" style="cursor: pointer;"
                                                v-for="(item, index) in scrollConfig.data"
                                                :key="index" @click="scrollClick(item)">
                                                <div style="width: 20%" :title="item.equipmentId">{{ item.equipmentId
                                                    }}
                                                </div>
                                                <div style="width: 20%;text-align: center;display: flex;justify-content: center">
                                                    <el-tag
                                                            style="width: 80px; color: white"
                                                            :style="{ backgroundColor: getHandleColor(item.teleNotification) }"
                                                            type="primary">
                                                        {{ getHandleStateText(item.teleNotification, "通知") }}
                                                    </el-tag>
                                                </div>
                                                <div style="width: 20%;text-align: center;display: flex;justify-content: center">
                                                    <el-tag
                                                            style="width: 80px; color: white"
                                                            :style="{ backgroundColor: getHandleColor(item.faultReport) }"
                                                            type="primary">
                                                        {{ getHandleStateText(item.faultReport, "上报") }}
                                                    </el-tag>
                                                </div>
                                                <div style="width: 20%;text-align: center;display: flex;justify-content: center">
                                                    <el-tag
                                                            style="width: 80px; color: white"
                                                            :style="{ backgroundColor: getHandleColor(item.fieldSurvey) }"
                                                            type="primary">
                                                        {{ getHandleStateText(item.fieldSurvey, "勘察") }}
                                                    </el-tag>
                                                </div>
                                                <div style="width: 20%;text-align: center;display: flex;justify-content: center">
                                                    <el-tag
                                                            style="width: 80px; color: white"
                                                            :style="{ backgroundColor: getHandleColor(item.eliminHidDang) }"
                                                            type="primary">
                                                        {{ getHandleStateText(item.eliminHidDang, "排除") }}
                                                    </el-tag>
                                                </div>
                                            </li>
                                        </ul>
                                    </Vue3SeamlessScroll>
                                </div>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="right">
                <div class="right-top" :style="{
          background: `url(${information[4]?.bgUrl!==undefined?information[4].bgUrl:null}) no-repeat center center`,
          backgroundSize: 'cover',
          borderRadius: '12px',
        }"
                     @click="yongdianClick()">
                    <dv-border-box-12>
                        <div class="first-right-body-total">
                            <div style="display:flex">
                                <Image/>
                                <span style="margin-top: -5px;margin-left: 5px">{{
                    information[4]?.name ? information[4]?.name : "无数据"
                  }}</span>
                                <!--              <dv-decoration-3 style="margin-top: -5px;width:150px;height:30px;"/>-->
                            </div>
                            <div class="total-body-icon" style="cursor: pointer">
                                <dv-scroll-ranking-board style="color: #2CC2EF" v-if="changeClient"
                                                         :config="rankingConfig"
                                                         :style="{width:100,height:`${monitorVideoHeight}px`}"/>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
                <div class="right-center" :style="{
          background: `url(${information[5]?.bgUrl!==undefined?information[5].bgUrl:null}) no-repeat center center`,
          backgroundSize: 'cover',
          borderRadius: '12px',
        }">
                    <dv-border-box-12>
                        <div class="first-right-body-total" style="display: flex">
                            <div style="display:flex">
                                <Image/>
                                <span style="margin-top: -5px;margin-left: 5px">{{
                    information[5]?.name ? information[5]?.name : "无数据"
                  }}</span>
                            </div>
                            <div class="operate">
                                <el-button
                                        size="small"
                                        :style="defaultStyle"
                                        @click="yongdianClick(information)">
                                    更多
                                </el-button>
                            </div>
                        </div>
                        <div class="dataContainer">
                            <div class="total-body-icon">
                                <PointMapImg v-if="changeClient" :width="monitorVideoWidth"
                                             :height="monitorVideoHeight"></PointMapImg>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
                <div ref="monitorVideo" class="right-bottom"
                     :style="{
          background: `url(${information[6]?.bgUrl!==undefined?information[6].bgUrl:null}) no-repeat center center`,
          backgroundSize: 'cover',
          borderRadius: '12px',
        }"
                     @click="linhuoClick(information)">
                    <dv-border-box-12>
                        <div class="first-right-body-total" style="padding: 10px;">
                            <div style="display:flex">
                                <Image/>
                                <span style="margin-top: -5px;margin-left: 5px">{{
                    information[6]?.name ? information[6]?.name : "无数据"
                  }}</span>
                                <!--              <dv-decoration-3 style="margin-top: -5px;width:150px;height:30px;"/>-->
                            </div>
                            <monitorVideo
                                    v-if="showVideo"
                                    :width="monitorVideoWidth"
                                    :height="monitorVideoHeight"
                                    index="videoHome"
                                    :code="monitorVideoCode"
                                    :app-key="appKey"
                                    :secret="secret"
                            />
                            <div v-else style="color: #2CC2EF; font-size: 25px;text-align: center">
                                无监控
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
        </div>
    </div>
    <div>
        <el-dialog v-model="this.$store.state.announceDialog" title="通知公告">
            <el-table :data="announceList" :row-style="{ height: '77px' }" border
                      style="width: calc(100vw - 240px);background-color: transparent;margin-top: 20px;height: 700px;color: #2CC2EF;font-size: 15px;">
                <el-table-column prop="clientName" label="单位名称" width="auto"/>
                <el-table-column prop="content" label="公告内容" width="auto"/>
                <el-table-column prop="createTime" label="公告时间" width="auto"/>
                <el-table-column prop="state" label="状态" align="center" width="100">
                    <template v-slot="scope">
                        <el-button @click="readAnnounce(scope.row)"
                                   style="padding: 5px;font-size: 15px;width: 55px;margin: auto;color: #0a0a0a;"
                                   type="danger"
                                   v-if="scope.row.state === '0'">未读
                        </el-button>
                        <el-tag style="display: flex;font-size: 15px;width: 55px;height: 32px;margin: auto;color: #0eee3b"
                                type="success" v-else-if="scope.row.state === '1'">已读
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 10px;justify-content: center"
                    :current-page="announceReqConfig.pageNum"
                    :page-size="announceReqConfig.pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="announceReqConfig.total"
                    :background="true"
                    @size-change="announceSizeChange"
                    @current-change="announceCurrentChange"
            />
        </el-dialog>
        <el-dialog v-model="this.$store.state.warnDialog" title="报警列表">
            <el-table :data="alarmTodayData" :row-style="{ height: '77px' }" border
                      style="width: calc(100vw - 240px);background-color: transparent;margin-top: 20px;height: 700px;color: #ffffff;font-size: 15px;">
                <el-table-column prop="partModel" label="部件编号" width="200"/>
                <el-table-column prop="warnTypeName" label="类型" width="150"/>
                <el-table-column prop="warnStateName" label="报警状态" width="200"/>
                <el-table-column prop="warnTime" label="报警时间" width="auto"/>
                <el-table-column prop="isDeal" label="是否处理" align="center" width="100">
                    <template #default="scope">
                        <el-tag style="padding: 5px;font-size: 13px;width: 55px;margin: auto;color: #d21010"
                                type="danger"
                                v-if="scope.row.isDeal === 0">未处理
                        </el-tag>
                        <el-tag style="padding: 5px;font-size: 13px;width: 55px;margin: auto;color: #0eee3b"
                                type="success"
                                v-else-if="scope.row.isDeal === 1">已处理
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 10px;justify-content: center"
                    :current-page="warnReqConfig.pageNum"
                    :page-size="warnReqConfig.pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="warnReqConfig.total"
                    :background="true"
                    @size-change="warnSizeChange"
                    @current-change="warnCurrentChange"
            />
        </el-dialog>
        <el-dialog v-model="dialogImportVisible" width="555px">
            <img :src="'/api/file/download/home/xfService/files/xfApp.png'">
        </el-dialog>
    </div>

</template>

<script>
    import {HomeFilled} from "@element-plus/icons-vue";
    import UnitPie from "@/views/homeComponents/UnitPie.vue";
    import AlarmType from "@/views/homeComponents/AlarmType.vue";
    import Image from "@/views/homeComponents/Image.vue";
    import HomeMapShow from "@/views/homeComponents/mapComponent/HomeMapShow.vue";
    import BarChat from "@/views/homeComponents/BaChart.vue";
    import Monitor from "@/views/homeComponents/Monitor.vue";
    import request from "@/utils/request.js";
    import PointClickDialog from "@/views/homeComponents/mapComponent/PointClickDialog.vue";
    import IframeComponent from "@/views/homeComponents/IframeComponent.vue";
    import MonitorVideo from "@/views/homeComponents/HKVideo/monitorVideo.vue";
    import {ref} from "vue";
    import Acyclic from "@/views/homeComponents/Acyclic.vue";
    import UnitList from "@/views/homeComponents/UnitList.vue";
    import ScoreAcyclic from "@/views/homeComponents/ScoreAcyclic.vue";
    import Announcement from "@/views/homeComponents/Announcement.vue";
    import HomeDialog from "@/views/homeComponents/HomeDialog.vue";
    import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
    import PointMapImg from "@/views/homeComponents/PointMapImg.vue";
    import UnitBar from "@/views/homeComponents/UnitBar.vue";
    import {serverIp} from "../../../public/static/config"

    export default {
        components: {
            serverIp,
            UnitBar,
            PointMapImg,
            Vue3SeamlessScroll,
            HomeDialog,
            Announcement,
            ScoreAcyclic,
            UnitList,
            Acyclic,
            MonitorVideo,
            IframeComponent, PointClickDialog, Monitor, BarChat, HomeMapShow, Image, AlarmType, UnitPie, HomeFilled
        },
        data() {
            return {
                dialogImportVisible: false,
                otherClient: false,
                searchVideoName: "",
                changeClient: true,
                announceReqConfig: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0,
                    keyWord: "",
                    level: null,
                    organizationId: null,
                    isAllClient: "",
                    clientIds: []
                },
                warnReqConfig: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0,
                },
                announceList: [],
                // 单位数据
                clientConfig: {},
                monitorVideoCode: "0f048497ce7b40cfadb15e953ced32c9",
                appKey: "29148897",
                secret: "BW70AywTF0N7b4Af61aH",
                operateOptions: ['统计', '列表'],
                selectedOperate: "统计",
                showVideo: false,
                monitorVideoHeight: 0,
                monitorVideoWidth: 0,
                currentTime: "",
                loading: false,
                change: false,
                information: [],
                currentData: {},
                userInformation: JSON.parse(localStorage.getItem("user")),
                selectedOrganizationId: JSON.parse(localStorage.getItem("user")).organization,
                inputNum: 0,
                classNum: 0,
                majorNum: 0,
                todayAllCount: {
                    yesterWarnCount: "11",
                    warnCount: "22",
                    warnEquipmentCount: "22"
                },
                scrollConfig: {
                    data: [],
                },
                monitorScrollConfig: {
                    data: [],
                    show: false,
                },
                buttons: ['设备', '报警', '处理'],
                activeButton: null,
                defaultStyle: {
                    backgroundColor: 'rgba(4,19,66,0.6)',
                    border: 'none'
                },
                activeStyle: {
                    backgroundColor: '#08277e',
                    color: "#409eff",
                    border: 'none'
                },
                rankingConfig: {
                    data: [],
                    carousel: 'single',
                    unit: '个',
                    waitTime: 1000
                },
                alarmTodayData: [],
                windowWidth: ref(window.innerWidth),
                windowHeight: ref(window.innerHeight)
            }
        },
        created() {
            this.getAnnounce()
            this.getClientData()
            this.getSetting()
            this.setActiveButton("设备")
            this.findTypeCount()
            this.updateMonitorData()
            this.getTodayWarn()
        },
        watch: {
            changeClient(newValue, oldValue) {
                if (!newValue) {
                    this.findTypeCount()
                    this.setActiveButton("设备")
                    this.updateMonitorData()
                }
            },
            searchVideoName() {
                this.updateMonitorData()
            }
        },
        mounted() {
            this.monitorVideoWidth = this.$refs.monitorVideo.offsetWidth - 20;
            this.monitorVideoHeight = this.$refs.monitorVideo.offsetHeight - 50;
            this.updateTime();
            setInterval(this.updateTime, 1000);
            window.addEventListener('resize', this.updateWindowSize);
        },
        unmounted() {
            // 点位图清空
            this.$store.state.currentClientInfo = []
            window.removeEventListener('resize', this.updateWindowSize);
            this.showVideo = false
        },
        methods: {
            // 获取单位数据
            getClientData() {
                let level = this.userInformation.level
                let organizationId = this.userInformation.organization
                let isAllClient = this.userInformation.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = Object.values(this.userInformation.clientIds);
                } else {
                    clientIds = [];
                }
                request.get("/client/clientAndEquipCount?level=" + level + "&organizationId=" + organizationId + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
                    this.clientConfig = res.data
                })
            },
            // 关闭播报
            closeAnnouncer() {
                localStorage.removeItem("speechText")
                localStorage.removeItem("speechStartTime")
            },
            // 点击切换监控
            monitorClick(config) {
                if (config.monitorNum !== null) {
                    this.monitorVideoCode = config.monitorNum
                } else {
                    this.$message.error("无编号信息")
                    return
                }
                if (config.appKey !== null) {
                    this.appKey = config.appKey
                } else {
                    this.$message.error("无appKey信息")
                    return
                }
                if (config.secret !== null) {
                    this.secret = config.secret
                } else {
                    this.$message.error("无secret信息")
                    return
                }
                this.showVideo = false
                setTimeout(() => {
                    this.showVideo = true
                }, 50)
            },
            selectOption(option) {
                this.selectedOperate = option;
            },
            updateWindowSize() {
                this.windowWidth = window.innerWidth;
                this.windowHeight = window.innerHeight;
                this.showVideo = false;
                this.monitorVideoWidth = this.$refs.monitorVideo.offsetWidth - 20;
                this.monitorVideoHeight = this.$refs.monitorVideo.offsetHeight - 50;
                setTimeout(() => {
                    this.showVideo = true
                }, 1000)
            },
            updateTime() {
                const now = new Date();
                const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                this.currentTime = now.toLocaleString() + " " + days[now.getDay()];
            },
            getSetting() {
                request.get("/home-bg-url/all").then(res => {
                    this.information = res.data
                    this.loading = true
                })
            },
            loginOut() {
                this.$store
                    .dispatch("utils/closeWS")
                    .then((res) => {
                    });
                this.$router.push("/login")
                localStorage.clear()
            },
            wulianClick(information) {
                if (information[0].turnUrl !== undefined && information[0].turnUrl !== '') {
                    window.open(information[0].turnUrl)
                }
            },
            haiwanClick(information) {
                if (information[1].turnUrl !== undefined && information[1].turnUrl !== '') {
                    window.open(information[1].turnUrl)
                }
            },
            yongdianClick(information) {
                // if (information[2].turnUrl !== undefined && information[2].turnUrl !== '') {
                //   window.open(information[2].turnUrl)
                // }
                this.$router.push("/client/client")
            },
            linhuoClick(information) {
                if (information[3].turnUrl !== undefined && information[3].turnUrl !== '') {
                    window.open(information[3].turnUrl)
                }
            },
            findTypeCount() {
                console.log("获取右上设备统计数据")
                let level = JSON.parse(localStorage.getItem("user")).level
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                } else {
                    clientIds = [];
                }
                let clientId = this.$store.state.currentClientInfo?.id ?? ""
                request.get("/equipment-input-store/findTypeCount?organizationId=" + this.selectedOrganizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&clientId=" + clientId).then(res => {
                    this.rankingConfig.data = res.data;
                    this.rankingConfig = {...this.rankingConfig}
                })
            },
            setActiveButton(button) {
                this.change = false
                this.activeButton = button;
                if (button === "设备") {
                    this.getAllEquipment()
                } else if (button === "报警") {
                    this.getWarn()
                } else if (button === "处理") {
                    this.getHandle()
                }
            },
            videoClick(item) {
                request.get("/video-device/getByEquipmentId?equipmentId=" + item.equipmentId).then(res => {
                    if (res.data === null) {
                        this.showVideo = false
                    } else {
                        this.monitorClick(res.data)
                    }
                    this.monitorScrollConfig.show = true
                })
            },
            scrollClick(item) {
                console.log(item)
                if (this.activeButton === "设备") {
                    if (item.systemId === 0) {
                        if (item.type === 52) {
                            this.$router.push({
                                path: "/deviceSysData",
                                query: {equipmentInputStoreId: item.id, equipmentId: item.equipmentId}
                            });
                        } else if (item.type === 51) {
                            this.$router.push({
                                path: "/fireCockSysData",
                                query: {equipmentInputStoreId: item.id, equipmentId: item.equipmentId}
                            });
                        } else {
                            this.$router.push({path: '/equipment/facility/deviceList', query: {id: item.id}})
                        }
                    } else {
                        this.$router.push({
                            path: '/equipment/facility/fireAlarmSystem/fireAlarmConUnit',
                            query: {id: item.id}
                        })
                    }
                } else if (this.activeButton === "报警") {
                    if (item.equipmentType === 52) {
                        this.$router.push({
                            path: "/deviceSysData",
                            query: {
                                equipmentInputStoreId: item.equipmentInputStoreId,
                                equipmentId: item.equipmentId,
                                warnTime: item.warnTime
                            }
                        });
                    } else if (item.equipmentType === 51) {
                        this.$router.push({
                            path: "/fireCockSysData",
                            query: {
                                equipmentInputStoreId: item.equipmentInputStoreId,
                                equipmentId: item.equipmentId,
                                warnTime: item.warnTime
                            }
                        });
                    } else {
                        this.$router.push({path: "/warn/warnRecord", query: {id: item.id}})
                    }


                } else if (this.activeButton === "处理") {
                    this.$router.push({path: "/warn/warnRecord", query: {id: item.id}})
                }
            },
            getAllEquipment() {
                console.log("获取中下设备数据")
                let level = JSON.parse(localStorage.getItem("user")).level
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                let isAllClient = this.userInformation.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = Object.values(this.userInformation.clientIds);
                } else {
                    clientIds = [];
                }
                let clientId = this.$store.state.currentClientInfo?.id ?? ""
                request.get("/equipment-input-store/homeAll?organizationId=" + this.selectedOrganizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&clientId=" + clientId).then(res => {
                    this.scrollConfig.data = res.data
                    this.change = true
                })
            },
            getEquipmentColor(state) {
                switch (state) {
                    case "0":
                        return "var(--custom-green-color)"; // 正常
                    case "1":
                        return "var(--custom-red-color)"; // 报警
                    default:
                        return "var(--custom-yellow-color)"; // 其他状态
                }
            },
            getEquipmentStateText(state) {
                switch (state) {
                    case "0":
                        return "正常";
                    case "1":
                        return "报警";
                    case "2":
                        return "故障";
                    case "3":
                        return "屏蔽";
                    case "4":
                        return "监管";
                    case "5":
                        return "启动";
                    case "6":
                        return "反馈";
                    case "7":
                        return "延时";
                    case "8":
                        return "主电故障";
                    case "9":
                        return "备电故障";
                    case "10":
                        return "总线故障";
                    case "11":
                        return "手动状态";
                    case "12":
                        return "配置改变";
                    case "13":
                        return "复位";
                    default:
                        return "未知";
                }
            },
            getWarn() {
                console.log("获取中下报警数据")
                let level = JSON.parse(localStorage.getItem("user")).level
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                let isAllClient = this.userInformation.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = Object.values(this.userInformation.clientIds);
                } else {
                    clientIds = [];
                }
                let clientId = this.$store.state.currentClientInfo?.id ?? ""
                request.get("/warn-record/all?organizationId=" + this.selectedOrganizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&clientId=" + clientId).then(res => {
                    this.scrollConfig.data = res.data
                    this.change = true
                })
            },
            getWarnStateText(state) {
                switch (state) {
                    case 0:
                        return "未处理";
                    case 1:
                        return "已处理";
                    default:
                        return "未知";
                }
            },
            getWarnColor(state) {
                switch (state) {
                    case 0:
                        return "var(--custom-red-color)"; // 未处理
                    case 1:
                        return "var(--custom-green-color)"; // 已处理
                    default:
                        return "var(--custom-yellow-color)"; // 其他状态
                }
            },
            getHandle() {
                console.log("获取中下处理数据")
                let level = JSON.parse(localStorage.getItem("user")).level
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                let isAllClient = this.userInformation.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = Object.values(this.userInformation.clientIds);
                } else {
                    clientIds = [];
                }
                let clientId = this.$store.state.currentClientInfo?.id ?? ""
                request.get("/warn-record/all?organizationId=" + this.selectedOrganizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&clientId=" + clientId).then(res => {
                    this.scrollConfig.data = res.data
                    this.change = true
                })
            },
            getHandleStateText(state, text) {
                switch (state) {
                    case "0":
                        return "未" + text;
                    case "1":
                        return "已" + text;
                    default:
                        return "未知";
                }
            },
            getHandleColor(state) {
                switch (state) {
                    case "0":
                        return "var(--custom-red-color)"; // 未
                    case "1":
                        return "var(--custom-green-color)"; // 已
                    default:
                        return "var(--custom-yellow-color)"; // 其他状态
                }
            },
            updateMonitorData() {
                console.log("获取左下监控数据")
                let level = JSON.parse(localStorage.getItem("user")).level
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                let isAllClient = this.userInformation.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = Object.values(this.userInformation.clientIds);
                } else {
                    clientIds = [];
                }
                let clientId = this.$store.state.currentClientInfo?.id ?? ""
                request.get("/video-device/all?organizationId=" + this.selectedOrganizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&clientId=" + clientId + "&videoName=" + this.searchVideoName).then(res => {
                    this.monitorScrollConfig.data = res.data
                    if (this.monitorScrollConfig.data.length === 0) {
                        this.showVideo = false
                    } else {
                        this.monitorClick(this.monitorScrollConfig.data[0])
                    }
                    this.monitorScrollConfig.show = true
                })
            },
            announceClick() {
                this.$store.state.announceDialog = true
            },
            announceSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.announceReqConfig.pageSize = pageSize
                this.getAnnounce()
            },
            announceCurrentChange(pageNum) {  // 改变当前页码触发
                this.announceReqConfig.pageNum = pageNum
                this.getAnnounce()
            },
            warnSizeChange(pageSize) {
                this.warnReqConfig.pageSize = pageSize
                this.getTodayWarn()
            },
            warnCurrentChange(pageNum) {  // 改变当前页码触发
                this.warnReqConfig.pageNum = pageNum
                this.getTodayWarn()
            },
            getAnnounce() {
                let userId = JSON.parse(localStorage.getItem("user")).id
                let level = JSON.parse(localStorage.getItem("user")).level
                let organizationId = JSON.parse(localStorage.getItem("user")).organization
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                let isAllClient = this.userInformation.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = Object.values(this.userInformation.clientIds);
                } else {
                    clientIds = [];
                }
                request.get("/announce/findByUserId?pageNum=" + this.announceReqConfig.pageNum + "&pageSize=" + this.announceReqConfig.pageSize + "&keyWord=" +
                    this.announceReqConfig.keyWord + "&level=" + level + "&organizationId=" + organizationId + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&userId=" + userId).then(res => {
                    console.log(res)
                    this.announceList = res.data.record
                    this.announceReqConfig.total = res.data.total
                })
            },
            readAnnounce(item) {
                item.state = 1
                request.post("/announce/edit", item).then(() => {
                    this.getAnnounce()
                })
            },
            getTodayWarn() {
                let level = JSON.parse(localStorage.getItem("user")).level
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                } else {
                    clientIds = [];
                }
                request.get("/warn-record/todayAllPage?pageNum=" + this.warnReqConfig.pageNum + "&pageSize=" + this.warnReqConfig.pageSize + "&level=" + level + "&organizationId=" + this.selectedOrganizationId + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
                    if (res.code === '200') {
                        this.alarmTodayData = res.data.record;
                        this.warnReqConfig.total = res.data.total

                    } else {
                        this.$message.error("错误" + res.msg)
                    }
                })
            },
            backClient() {
                // 执行返回操作
                this.$store.state.currentClientInfo = {}
                this.changeClientClick()
                this.otherClient = false
            },
            changeClientClick() {
                this.otherClient = true
                this.$store.state.pointClickDialog = false
                this.changeClient = false
                setTimeout(() => {
                    this.changeClient = true
                }, 200)
            },
            uploadApp() {
                this.dialogImportVisible = true;
            }
        },
    };

</script>

<style scoped lang="scss">
    * {
        box-sizing: border-box;
    }

    span {
        display: block; /* 改为 block 以支持 text-overflow */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #2CC2EF;
        font-size: 19px;
    }

    th {
        font-size: 19px;
    }

    .container {
        position: absolute;
        display: flex;
        width: 100%;
        height: 93vh;
        overflow-x: hidden; /* 禁止水平滚动 */
    }

    .left {
        margin-top: 15px;
        margin-left: 10px;
        z-index: 800;
        width: 25%;
        height: calc(100% - 2vh);
        display: flex;
        flex-direction: column;
    }

    .right {
        margin-top: 15px;
        margin-right: 10px;
        z-index: 800;
        width: 25%;
        height: calc(100% - 2vh);
        display: flex;
        flex-direction: column;
    }

    .left > div, .center > div, .right > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center {
        margin-top: 15px;
        margin-left: 5px;
        margin-right: 5px;
        z-index: 100;
        height: calc(100% - 2vh);
        display: flex;
        flex-direction: column;
        width: 50%;
    }

    .center-top {
        height: 70%;
    }

    .center-bottom {
        margin-top: 1vh;
        height: 28.5%;
        color: #2CC2EF;
    }

    .left-center, .right-center {
        margin-top: 1vh;
        height: 33%;
    }

    .left-top, .right-top {
        height: 33%;
    }

    .left-bottom, .right-bottom {
        margin-top: 1vh;
        height: 33%;
    }

    .container p {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 19px;
        font-weight: bold;
        padding: 10px;
    }

    .items {
        position: relative;
        border: 1px solid #069;
        border-radius: 4px;
        height: 100%;
        width: 100%;
    }

    .dialog-within-div {
        position: absolute; /* Ensure it stays within the div */
        top: 50%; /* Customize position as needed */
        left: 50%; /* Customize position as needed */
        transform: translate(-50%, -50%); /* Centers the dialog */
        z-index: 10; /* Ensure it appears above other content */
    }

    .dataContainer {
        display: flex;
        justify-content: space-around; /* 使得子元素在容器中水平等间距排列 */
        font-size: 18px;
    }

    .dropdown-content a {
        color: #2CC2EF;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

    .info-container {
        display: flex;
        gap: 20px; /* 调整间距 */
    }

    .info-container span {
        display: inline-flex; /* 保证 span 和内部元素一起排列 */
        align-items: center; /* 垂直居中 */
    }

    .info-container span a {
        font-weight: bolder;
    }

    .operate {
        display: flex;
        gap: 10px
    }

    .operate a {
        cursor: pointer;
        color: #2CC2EF;
    }

    .operate a.active {
        color: #1bcebf; /* 活动状态的颜色 */
        font-weight: bold; /* 加粗 */
    }

    /** 默认样式 */
    .input-border-style {
        border: 1px solid #47c9FF;
        border-radius: 3px;
    }

    :deep(.el-input__wrapper) {
        background-color: unset;
    }

    .first-right-body-total {
        padding: 10px;
        justify-content: space-between;
    }

    .scroll-wrap {
        height: 90%;
        width: 100%;
        overflow: hidden;
    }

    .scroll-list {
        overflow: hidden;
        line-height: 46px;
        margin: 0;
    }

    .scroll-ul {
        margin: 0;
        padding: 0;
    }

    .header-scroll-ul {
        margin: 0;
    }

    .scroll-li {
        color: #2CC2EF;
        text-align: center;
        display: flex;
    }

    .scroll-li > div {
        display: block; /* 改为 block 以支持 text-overflow */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 0; /* 确保不会缩小 */
    }

    .scroll-header .scroll-li {
        background-color: rgba(4, 19, 65, 0.4);
        font-weight: bold;
        border-top: none;
    }

    .scroll-content .scroll-li:nth-child(odd) {
        background-color: rgba(4, 19, 65, 0.4); /* Light gray for odd rows */
    }

    .scroll-content .scroll-li:nth-child(even) {
        background-color: rgba(1, 19, 56, 0.47); /* White for even rows */
    }

    .scroll-content .scroll-li > div:hover {
        color: white; /* 悬浮时背景颜色 */
    }


    /* 首页弹窗 */
    :deep(.el-dialog) {
        /* background: rgba(0, 0, 0, .2) !important; */
        background: rgba(0, 0, 0, 0.2) !important;
        border: rgb(8, 255, 243) 1px solid;
        backdrop-filter: blur(3px);
    }

    :deep(.el-dialog__title) {
        color: rgb(255, 255, 255);
        font-weight: 900;
    }

    :deep(.el-dialog__header) {
        color: #fff;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        box-shadow: 0 0 1.5vw rgb(97, 255, 255) inset;
        background: linear-gradient(#74ffef, #74ffef) left top,
        linear-gradient(#3deeda, #3deeda) left top,
        linear-gradient(#3deeda, #3deeda) right top,
        linear-gradient(#3deeda, #3deeda) right top;
        background-repeat: no-repeat;
        background-size: 2px 20px, 20px 2px;
    }

    :deep(.el-dialog__body) {
        padding: 20px;
        color: #fff;
        background: rgba(0, 0, 0, 0.5);
        text-align: left;
        box-shadow: 0 0 1.5vw rgb(57, 255, 255) inset;
        background: linear-gradient(#3deeda, #3deeda) left bottom,
        linear-gradient(#3deeda, #3deeda) left bottom,
        linear-gradient(#3deeda, #3deeda) right bottom,
        linear-gradient(#3deeda, #3deeda) right bottom;
        background-repeat: no-repeat;
        background-size: 2px 20px, 20px 2px;
    }

    :deep(.el-form-item__content) {
        background-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 0.5vw rgb(57, 255, 255);
        background-repeat: no-repeat;
        border-radius: 10px;
    }

    :deep(.planTitle) {
        padding: 0 0 0 20px;
        color: #8ae3e9;
        font-size: 18px;
        font-weight: 600;
    }

    :deep(.planContent) {
        color: #e6feff;
        font-size: 16px;
    }

    :deep(.el-button--primary) {
        color: #FFF;
        background-color: #415b5ec2;
        border-color: #75fbe9;
        position: absolute;
        margin-left: 374px;
    }

    /* 表格内背景颜色  */
    :deep(.el-table th),
    :deep(.el-table tr),
    :deep(.el-table td) {
        background-color: transparent;
        font-size: 24px;
        height: 5px;
    }

    :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
        background-color: transparent;
    }

    /* 去掉表格里的padding */
    :deep(.el-table .cell),
    .el-table th div {
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    :deep(.cell) {
        color: #ffffff;
    }

    /*分页*/
    .el-pagination__total {
        color: white;
    }
</style>
